<template>
  <div>
    <el-button type="primary" size="mini" class="addBtn" @click="openAddDrawer()">添加</el-button>
    <el-table
      v-loading="loading"
      :data="carouselList"
      border
      style="width: 100%"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="carouselId" label="轮播图id" />
      <el-table-column prop="carouselImgUrl" label="图片">
        <template slot-scope="scope">

          <el-image
            style="width: 100px;min-height: 60px"
            :src="scope.row.carouselImgUrl"
            :preview-src-list="[scope.row.carouselImgUrl]"
          >
            <div
              slot="placeholder"
              v-loading="true"
              element-loading-text="图片加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="#fff"
              class="image-slot"
              style="height: 60px;width: 100%"
            />
            <div slot="error" class="image-slot" style="width:100px;height:60px;line-height:60px;background-color: #e2e2e2">
              load failed
            </div>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="carouselName" label="轮播图名" />
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enabled===1" tag="success">启用</el-tag>
          <el-tag v-else tag="danger">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="carouselUrl" label="跳转地址" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="hover">
            <el-button size="mini" type="primary">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="handlerEdit(scope.row.carouselId)">编辑</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="danger" @click="handlerDelete(scope.row.carouselId)">删除</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="success" @click="handlerEnable(scope.row.carouselId)">启用</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="warning" @click="handlerDisable(scope.row.carouselId)">弃用</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>

      </el-table-column>
    </el-table>
    <el-dialog
      title="添加轮播图"
      :visible.sync="carouselDrawer"
      width="30%"
    >
      <carousel-add @getCarouselList="getCarouselList" @closeAddDrawer="closeAddDrawer" />
    </el-dialog>
    <el-dialog
      title="更新轮播图"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <carousel-update :carousel="carousel" @getCarouselList="getCarouselList" @closeUpdateDialog="closeUpdateDialog" />
    </el-dialog>
  </div>
</template>

<script>
import carouselAdd from '../../sys/carousel/carousel-add'
import carouselUpdate from '../../sys/carousel/carousel-update'
import carouselApi from '../../../api/carousel'

export default {
  name: 'CarouselList',
  components: {
    carouselAdd,
    carouselUpdate
  },
  data() {
    return {
      // 数据列表
      carouselList: [],
      carouselDrawer: false,
      dialogVisible: false,
      carousel: {},
      loading: true
    }
  },
  created() {
    this.getCarouselList()
  },
  methods: {
    getCarouselList() {
      carouselApi.listBack().then(res => {
        this.carouselList = res.data
        this.loading = false
      })
    },
    handlerEdit(id) {
      carouselApi.get(id).then(res => {
        if (res.code === 200) {
          this.carousel = res.data
        }
      })
      this.openUpdateDialog()
    },
    handlerDelete(id) {
      this.$confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        carousel: 'warning'
      }).then(() => {
        carouselApi.deleteById(id).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          }
          this.getCarouselList()
        })
      })
    },
    handlerEnable(id) {
      this.$confirm('此操作将启用该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        carousel: 'warning'
      }).then(() => {
        carouselApi.enableById(id).then(res => {
          this.$message.success(res.msg)
          this.getCarouselList()
        })
      })
    },
    handlerDisable(id) {
      this.$confirm('此操作将弃用该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        carousel: 'warning'
      }).then(() => {
        carouselApi.disableById(id).then(res => {
          this.$message.success(res.msg)
          this.getCarouselList()
        })
      })
    },
    openAddDrawer() {
      this.carouselDrawer = true
    },
    closeAddDrawer() {
      this.carouselDrawer = false
    },
    openUpdateDialog() {
      this.dialogVisible = true
    },
    closeUpdateDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
